<template>
  <div class="bgc_grey" id="personal_center" >
    <div>
      <div class="personal_category">
        <p v-for="item in list" :key="item.label" :class="{'active':$route.path == item.link} " @click="gotoLink(item)">{{item.label}}</p>
      </div>
      <el-menu :mode="'horizontal'"  menu-trigger="click"  class="personal_menu" :unique-opened="true" :default-active="curLabel.label" >
        <el-submenu :index="curLabel.label" popper-class="person_center">
          <template slot="title">{{curLabel.label}}</template>
          <el-menu-item :index="item.label" v-for="(item) in list" :key="item.label"  @click="gotoLink(item)">{{item.label}}</el-menu-item>
        </el-submenu>
      </el-menu> 
      <div class="personal_content" :class="pathClass" >
        <router-view></router-view>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      curLabel: {},
      activeNames: ''
    }
  },
  computed:{
    list(){
      return  [
        {label: this.$t('RIGHTS.MYRIGHTS'), link: '/my_benefits'},
        {label:  this.$t('USERINFO.MYINFO'), link: '/userinfo'},
        {label: this.$t('DEVICE.MYDEVICES'), link: '/my_devices'},
        // {label: 'My Favorite', link: '/my_favorite'},
      ]
    },
    pathClass () {
      return this.$route.path.split('/')
    },
  },
  mounted() {
    for(let i = 0; i < this.list.length; i++){
      if(this.list[i].link == this.$route.path){
        this.curLabel = this.list[i]
      }
    }
  },
  methods: {
    gotoLink(item){
      this.curLabel = item
      // window.open(item.link)
      this.$router.push(item.link)
    },
  }

}
</script>

<style lang="scss">
@import '@/styles/personal_center/personal_center.scss';
</style>